<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>source-map 工具</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="//s.kanzhun.com/js/jquery-2.1.0.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>
        .layui-form{
            margin-top: 50px;
        }
        .result {
            display: none;
            margin-right: 100px;
        }
        .file{
            opacity: 0;
            position: absolute;
            z-index: 100;
            left: 0;
            height: 38px;
        }
    </style>

</head>

<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">行列</label>
            <div class="layui-input-inline" style="min-width: 150px;overflow: hidden;width:auto">
                 <button type="button" class="layui-btn select">选择source-map</button>
                 <input type="file" class="file" name="file" required lay-verify="required" placeholder="请输入行" autocomplete="off" class="layui-input" onclick='openFile()'>
            </div>
            <div class="layui-input-inline" style="width: 80px">
                <input type="text" name="line"  required lay-verify="required" placeholder="行" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline"  style="width: 80px">
                <input type="text" name="column" required lay-verify="required" placeholder="列" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <div class="result">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input name="desc" placeholder="请输入内容" class="layui-input">
            </div>
        </div>
    </div>
    <script>
        var fileValue=""
        var openFile = function () {
            $(".result").hide()
        };
        $(".file").change(function(e){
        
            var url =$(this).val()
            var input = e.target;
            var reader = new FileReader();
            reader.onload = function() {
                if(reader.result) {
                    //显示文件内容]
                    
                    $(".select").text(url.replace(/\w+:\\fakepath\\/,""))
                    fileValue=reader.result
                  
                }
            };
            reader.readAsText(input.files[0]);

        })

        //Demo
        layui.use('form', function () {
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function (data) {
                var formData=data.field
                formData.file=fileValue
                $.ajax({
                    type: "POST",
                    url: "/getsouce",
                    data: formData,
                    dataType: "json",
                    success: function (data) {
                        console.log(data)
                        $(".result").show()
                        $(".result input").val(JSON.stringify(data))
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>